<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>计算属性</title>
	</head>
	<body>
		<div id="app">
			<!-- 需求：将数据字母进行反转 abc 反转为cba
				 方法：将数据拆分为数组，将数组进行反转，再将数组合并为字符串
				 函数：
					1.split 拆分数据
					2.reverse 反转数据
					3.join('')将数组转换为字符串
			-->
				 用户输入:<input v-model="msg" /><br>
				 数据展现:{{msg.split('').reverse().join('')}}<br>
				 计算属性:{{reverse}}
				 <!-- 计算属性用法：将需要计算的操作通过特定的方法先进行计算之后将结果进行展现 -->
		</div>
		<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
		<script>
			const app =new Vue({
				el: "#app",
				data: {
					msg: ''
				},
				computed: {
					reverse(){
						return this.msg.split('').reverse().join('')
					}
				}
			})
		</script>
	</body>
</html>
